<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>uc浏览器</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			img{
				vertical-align: bottom;
			}
			li{
				list-style: none;
			}
			a{
				text-decoration: none;
			}
			.bd{
				border: 1px solid red;
			}
			.w{
				width: 986px;
				margin: 0 auto;
			}
			.fl{
				float: left;
			}
			.fr{
				float: right;
			}
			.clearfix::before,.clearfix::after{
				content: "";
				display: table;
			}
			.clearfix::after{
				clear: both;
			}
			 header{
				position: fixed;
				background-color: #fff;
				width: 100%;
				z-index: 100;
				top: 0;
			}
			 
			}
			.navigation{
				padding-top: 5px;
				padding-right: 20px;
				
			}
			.navigation>li{
				margin-left: 32px;
				padding: 0 10px;
				position: relative;
			}
			.current{
				border-bottom: 3px solid #ff6203;
			}
			.navigation a{
				display: block;
				font-size: 20px;
				line-height: 62px;
			}
			.navigation>li:hover{
				border-bottom: 3px solid green;
			}
			.subnav{
				display: none;
				position: absolute;
			}
			.navigation>li:hover .subnav{
				display: block;
			}
			.subnav li:hover{
				background-color: yellow;
			}
			.subnav a{
				display: block;
				font-size: 16px;
				line-height: 25px;
			}
			.main{
				padding-top:70px;
			}
			.banner{
				height: 400px;
				background: #191919 url(images/banner.jpg) no-repeat center 0;
			}
			.icons{
				border-bottom: 1px solid royalblue;
				height: 145px;
			}
			.icon{
				padding-top: 58px;
				width: 138px;
				background: url(images/icon.png) no-repeat 49px 21px;
			}
			.icon:nth-child(2){
				background-position: -90px 21px;
			}
			
			.icon:nth-child(3){
				background-position: -224px 21px;
				position: relative;
			}
			/* 下面是new图标 */
			.icon:nth-child(3)::before{
				content: '';
				width: 23px;
				height: 11px;
				background: url(images/icon.png) -140px -280px;
				position: absolute;
				top: 15px;
				left: 82px;
			}
			.icon:nth-child(4){
				background-position: -362px 21px;
				position: relative;
			}
			.icon:nth-child(4)::before{
				content: '';
				width: 23px;
				height: 11px;
				background: url(images/icon.png) -140px -280px;
				position: absolute;
				top: 15px;
				left: 82px;
			}
			.icon:nth-child(5){
				background-position: -504px 21px;
			}
			.icon:nth-child(6){
				background-position: -645px 21px;
			}
			.icon:hover{
				background-position: 49px -99px;
			}
			.icon:nth-child(2):hover{
				background-position: -90px -99px;
			}
			.icon:nth-child(3):hover{
				background-position: -224px -99px;
			}
			.icon:nth-child(4):hover{
				background-position: -362px -99px;
			}
			.icon:nth-child(5):hover{
				background-position: -504px -99px;
			}
			.icon:nth-child(6):hover{
				background-position: -645px -99px;
			}
		
			.icon a{
				display: block;
				font-size: 11px;
				line-height: 81px;
				text-align: center;
				color: gray;
			}
			.icons .w{
				position: relative;
			}
			.twocode{
				
				width: 128px;
				background: url(images/twocode.png) no-repeat;
				font-size: 11px;
				line-height: 71px;
				padding-top: 106px;
				text-align: center;
				position: absolute;
				top: -32px;
				right: -4px;
			}
			
			.news{
				
			}
			.new{
				width: 290px;
			}
			.new .title{
				padding-top: 23px;
			}
			.title h4{
				margin-top: 15px;
			}
			.title a{
				position: relative;
				font-size: 12px;
				line-height: 58px;
				margin-right: 20px;
				
			}
			.new .title a::after{
				content: '';
				width: 4px;
				height: 4px;
				border: 2px solid black;
				border-left-color: transparent;
				border-bottom-color: transparent;
				transform: rotate(45deg);
				position: absolute;
				top: 24px;
				left: 28px;
			}
			/* 	.title div{
				width: 6px;
				height: 6px;
				border: 2px solid red;
				border-left-color: transparent;
				border-bottom-color: transparent;
				transform: rotate(45deg);
				margin-top: 6px;
			} */
			.pic{
				
				padding-top: 120px;
			}
			.pic a{
				font-size: 12px;
				line-height: 34px;
				display: block;
				text-align: center;
			}
			.new ul{
				margin-top: 3px;
			}
			.new ul li{
				
			}
			.new ul li a{
				font-size: 12px;
				line-height: 26px;
			}
			.new:nth-child(2){
				margin: 0px 58px ;
				
			}
			.new:nth-child(1) .pic{
			background: #f2f2f2  url(images/activity_pic.jpg) no-repeat;
			}
			.new:nth-child(2) .pic{
				background: #f2f2f2 url(images/news_pic.jpg) no-repeat;
			}
			.new:nth-child(3) .pic{
				background:  #f2f2f2 url(images/community_pic.jpg) no-repeat;
			}
			
			
			footer{
				margin-top: 35px;
				height: 471px;
				background-color: #333333;
				width: 100%;
			}
			.first{
				height: 277px;
				color: #808080;
			}
			.first .text{
				padding-top:47px;
				height: 210px;
				width: 164px;
				position: relative;
			}
			.first li{
				font-size: 11px;
				line-height: 19px;
			}

			.down{
				padding-top:47px;
				height:210px;
				width: 162px;
				
			}
			.down .title{
				position: relative;
			}
			 .down h5{
				width: 108px;
				margin-bottom: 12px;
				border: 1px solid #3f3f3f;
				padding: 5px 0 5px 30px;
			} 
			.down h5::before{
				content: '';
				width: 15px;
				height: 15px;
				background: url(images/icon.png) 0px -293px;
				position: absolute;
				top: 8px;
				left: 8px;
			}
			.down h5::after{
				content: '';
				width: 15px;
				height: 15px;
				background: url(images/icon.png) -31px -298px;
				position: absolute;
				top: 12px;
				left: 120px;
			}
			
			.png{
				/* background: url(case3/images/icon.png)  0px -316px no-repeat ; */

			}
			.png a{
				height: 210px;
				width: 160px;
				font-size: 12px;
				line-height: 26px;	
				color: #808080;
				padding-left: 30px;
				
				}
			.png:hover {
				background-position:0px -316px ;
			}
			.png:nth-child(2){
				background-position:0px -316px ;
				position: relative;
			}
			.png:nth-child(2)::before{
				content: '';
				width: 21px;
				height: 15px;
				background: url(images/icon.png)  0px -320px  ;
				position: absolute;
				top:6px;
				left: 6px;
			}
			.png:nth-child(2):hover::before{
			background-position: -25px -320px ;
			}
			
			.png:nth-child(3){
				background-position:0px -340px ;
				position: relative;
			}
			.png:nth-child(3)::before{
				content: '';
				width: 21px;
				height: 15px;
				background: url(images/icon.png)  0px -346px  ;
				position: absolute;
				top:6px;
				left: 6px;
			}
			.png:nth-child(3):hover::before{
			background-position: -25px -346px ;
			}
			.png:nth-child(4){
				background-position:0px -366px ;
				position: relative;
			}
			.png:nth-child(4)::before{
				content: '';
				width: 21px;
				height: 15px;
				background: url(images/icon.png)  0px -372px  ;
				position: absolute;
				top:6px;
				left: 6px;
			}
			.png:nth-child(4):hover::before{
			background-position: -25px -372px ;
			}
			.png:nth-child(5){
				position: relative;
				background-position:0px -394px ;
			}
			.png:nth-child(5)::before{
				content: '';
				width: 21px;
				height: 15px;
				background: url(images/icon.png)  0px -398px  ;
				position: absolute;
				top:6px;
				left: 6px;
			}
			.png:nth-child(5):hover::before{
			background-position:-25px -398px ;
			}
			.png:nth-child(6){
				position: relative;
				background-position:0px -420px ;
			}
			.png:nth-child(6)::before{
				content: '';
				width: 21px;
				height: 20px;
				background: url(images/icon.png)  0px -423px  ;
				position: absolute;
				top:6px;
				left: 6px;
			}
			.png:nth-child(6):hover::before{
			background-position:-25px -423px ;
			
			} 
		 	 .png:nth-child(7){
				position: relative;
				background-position:0px -445px ;
			} 
			.png:nth-child(7)::before{ 
				content: '';
				width: 21px;
				height: 20px;
				background: url(images/icon.png)  0px -449px  ;
				position: absolute;
				top:6px;
				left: 6px;
			}
			 .png:nth-child(7):hover::before{
			background-position:-25px -449px ;
			
			}
			
			.midder{
				color: #808080;
				font-size: 11px;
				line-height: 37px;
				height: 77px;
			}
			.link{
				position: relative;
				padding-left: 2px;
				border-top: 1px dashed  #808080;
			}
			.flink{
				position: relative;
				border-top:  1px dashed  #808080;
				border-bottom: 1px dashed  #808080;
			}
			.midder a:nth-child(14n){
				border-right: 0;
			}
			.midder a:nth-child(14n)::after{
				content: '';
				width: 23px;
				height: 11px;
				background: url(images/icon.png) -100px -280px;
				position: absolute;
				top: 12px;
				left: 975px;
			}
			
			h6{
				padding-left: 3px;
			}
			.midder a{
				text-align: center;
				padding:0 7.5px;
				color: #808080;
				border-right: 2px solid #808080;
			}
	
			.end{
				padding-top: 20px;
				height: 117px;
			}
			.end li{
				color: #808080;
				font-size: 11px;
				line-height: 19px;
				
			}
			.l{
				padding: 11px 16px 0 0;
			}
			.r .fr{
			
				padding:11px 0 0 15px;
			}
		</style>
	</head>
	<body>
		<!-- 语义化标签 -->
		<header class=" clearfix ">
			<div class="w">
			<div class="logo fl"><img src="images/uclogo.png" alt=""></div>
			<ul class="navigation fr clearfix">
				<li class="fl current"><a href="">首页</a></li>
				<li class="fl ">
					<a href="">下载</a>
					<ul class="subnav">
						<li><a href="">手机UC</a></li>
						<li><a href="">电脑浏览器</a></li>
						<li><a href="">TV浏览器</a></li>
					</ul>
				</li>
				<li class="fl "><a href="">公司</a></li>
				<li class="fl "><a href="">合作</a></li>
				<li class="fl "><a href="">社区</a></li>
				<li class="fl "><a href="">帮助</a></li>
			</ul>
		</div>
		</header>
		<div class="main">
			<div class="banner"></div>
			<div class="icons">
				<div class="w clearfix">
					<div class="icon fl "><a href="">Android版下载 </a></div>
					<div class="icon fl "><a href="">iPhone版下载 </a></div>
					<div class="icon fl "><a href="">电脑版下载 </a></div>
					<div class="icon fl "><a href="">Pad版下载</a></div>
					<div class="icon fl "><a href="">TV版下载 </a></div>
					<div class="icon fl "><a href="">WP版下载 </a></div>
					<div class="  twocode">手机扫一扫下载</div>
				</div>             
			</div>
			<div class="w news clearfix">
				<div class="fl new">
					<div class=" title clearfix">
						<h4 class="fl">活动专区</h4>
						
						<a href="" class="fr">更多</a>
					</div>
					<div class="pic"><a href="">上uc.cn，下载抢100M流量礼包</a></div>
					<ul>
						<li><a href="">你没得到奖，因为你没有摇一摇</a></li>
						<li><a href="">第二季环保袋活动开放申请啦</a></li>
						<li><a href="">最壕UC微信号，天天送大奖</a></li>
						<li><a href="">UC省钱攻略大曝光：6000万红包等你来！</a></li>
						<li><a href="">手机浏览器成移动上网第一入口 UC稳居市场</a></li>
					</ul>
				</div>
				<div class="fl new">
					<div class=" title clearfix">
						<h4 class="fl">新闻动态</h4>
					
						<a href="" class="fr">更多</a>
					</div>
					<div class="pic"><a href="">不断寻找合伙人</a></div>
					<ul>
						<li><a href="">神马搜索与《梦想星搭档》展开娱乐内</a></li>
						<li><a href="">UC九游11月报告：《乱斗西游》成MOBA手</a></li>
						<li><a href="">UC浏览器“抢票帮”颠覆传统 亲朋好友</a></li>
						<li><a href="">UC浏览器新版造就极致视频体验</a></li>
						<li><a href="">手机浏览器使用频率仅次于即时通讯</a></li>
					</ul>
				</div>
				<div class="fl new">
					<div class=" title clearfix">
						<h4 class="fl">社区热帖</h4>
					
						<a href="" class="fr">更多</a>
					</div>
					<div class="pic"><a href="">UC浏览器抢票帮正式发布！团结一切力量</a></div>
					<ul>
						<li><a href="">UC浏览器Android版10.0皮肤制作教程</a></li>
						<li><a href="">年底求加薪技巧！哥拼的是拍马屁的技巧</a></li>
						<li><a href="">UC浏览器抢票帮——召唤朋友一起帮你抢</a></li>
						<li><a href="">UC姐神秘面容首次曝光，多图胆小慎入</a></li>
						<li><a href="">【uc记者团】2015年春节回家 攻略</a></li>
					</ul>
				</div>
			</div>
		</div>
		<footer>
			<div class="w first">
				<div class="fl text" >
					<div class=" title">
						<h5  >uc浏览器</h5>
					</div>
					<ul>
						<li>产品动态</li>
						<li>功能介绍</li>
						<li>安卓浏览器</li>
						<li>iPhone浏览器</li>
						<li>电脑浏览器</li>
						<li>WP浏览器</li>
						<li>iPad浏览器</li>
						<li>aPad浏览器</li>
						<li>TV浏览器</li>
						<li>塞班浏览器</li>
					</ul>
				</div>
				<div class="fl text" >
					<div class=" title">
						<h5 >公司</h5>
					</div>
					<ul>
						<li>公司首页</li>
						<li>公司概况</li>
						<li>公司动态</li>
						<li>管理团队</li>
						<li>企业文化</li>
						<li>粉丝专区</li>
						<li>荣誉之旅</li>
						<li>联系我们</li>
						<li>投资者</li>
						<li>UC闪屏</li>
					</ul>
				</div>
				<div class="fl text" >
					<div class="title">
						<h5 >其他产品</h5>
					</div>
					<ul>
						<li>UC九游</li>
						<li>PP助手</li>
						<li>神马搜索</li>
						<li>UC云</li>
						<li>U点充值</li>
						<li>用户中心</li>
						<li>体验中心</li>
						<li>帮助中心</li>
						<li>意见反馈</li>
					</ul>
				</div>
				<div class="fl text" >
					<div class="title">
						<h5 >开放合作</h5>
					</div>
					<ul>
						<li>游戏开放平台</li>
						<li>运营商合作</li>
						<li>终端厂商合作</li>
						<li>互联网合作</li>
						<li>开发者中心</li>
						<li>战略投资</li>
					</ul>
				</div>
				<div class="fl text" >
					<div class="title">
						<h5>招聘</h5>
					</div>
					<ul>
						<li>社会招聘</li>
						<li>人才推荐</li>
						<li>校园招聘</li>
						<li>实习生招聘</li>
						<li>内部推荐</li>
						<li>走进UC</li>
					</ul>
				</div>
				<div class="fr down" >
					<div class=" title">
						<h5>中文版</h5>
						<div class="png"><a href="">手机站</a></div>
						<div class="png"><a href="">Pad站</a></div>
						<div class="png"><a href="">TV站</a></div>
						<div class="png"><a href="">UC浏览器微博</a></div>
						<div class="png"><a href="">UC浏览器贴吧</a></div>
						<div class="png"><a href="">UC浏览器微信</a></div>
						
					</div>
				</div>
			</div>	
			<div class="w midder">
				<div class="link">
					<a href="">阿里巴巴集团</a>
					<a href="">淘宝网</a>
					<a href="">天猫</a>
					<a href="">聚划算</a>
					<a href="">全球速卖通</a>
					<a href="">阿里巴巴国际交易市场</a>
					<a href="">1688</a>
					<a href="">阿里妈妈</a>
					<a href="">阿里旅行·去啊</a>
					<a href="">阿里云计算</a>
					<a href="">YunOS</a>
					<a href="">阿里通信</a>
					<a href="">万网</a>
					<a href="">高德</a>
				</div>
				<div class="flink">
					<h6 class="fl">友情链接：</h6>
					<a href="">手机游戏</a>
					<a href="">网易科技</a>
					<a href="">dospy智能手机网</a>
					<a href="">历趣手机软件</a>
					<a href="">威锋网</a>
					<a href="">小说全搜</a>
					<a href="">IT之家</a>
					<a href="">前瞻网</a>
					<a href="">手机软件下载</a>
					<a href="">pc6下载</a>
					<a href="">KK语音</a>
					<a href="">安卓市场</a>
					<a href="">机锋网</a>
				</div>
				
			</div>
			<div class="w end">
				<div class="fl l">
					<div><img src="images/logo_company.png" alt=""></div>
				</div>
				<div class="r">
					<div class="fr"><img src="images/knet_cn.png" alt=""></div>
					<div class="fr"><img src="images/anva.png" alt=""></div>
					<div class="fr"><img src="images/gs.png" alt=""></div>
					<div class="fr"><img src="images/qa_wen.png" alt=""></div>
				</div>   
				<div>
					<ul >
						<li>2004-2014 uc.cn 版权所有 网络文化经营许可证：文网文[2010]176号</li>
						<li>中华人民共和国互联网药品信息服务资格证：（粤）-非经营性-2011-0120</li>
						<li>增值电信业务经营许可证: 粤B2-20070379 粤ICP备09210879号</li>
					</ul>
				</div>
			
			</div>
		</footer>
	</body>
</html>
